<style lang="scss" src="../form/index.scss" scoped></style>
<template>
    <page-box
        class="form"
        :class="{ readOnly: _isReadOnly, send: $route.query.isSend === 'send' }"
    >
        <div v-if="isSend" class="send-task-content">
            <div class="send-task-title">
                <span class="title">下发任务</span>
                <div>
                    <el-button
                        v-if="_isTownPage"
                        type="primary"
                        size="mini"
                        @click="sendTask"
                        >下发</el-button
                    >
                    <el-button type="text" @click="goBackList">取消</el-button>
                </div>
            </div>
            <el-form
                :inline="true"
                :model="sendTaskForm"
                ref="sendTaskForm"
                class="send-task-form"
                :rules="sendTaskFormRules"
            >
                <div class="top-set">
                    <el-form-item label="期望采集数量" prop="expectedNum">
                        <el-input
                            class="expectedNum-input"
                            v-model.number="sendTaskForm.expectedNum"
                            size="mini"
                            @keyup="checkInput"
                            @input="checkInput"
                            @onafterpaste="checkInput"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="任务结束时间" prop="endDate" required>
                        <el-date-picker
                            v-model="sendTaskForm.endDate"
                            type="datetime"
                            :picker-options="expireTimeOption"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间"
                            size="mini"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="任务抄送人">
                        <el-button
                            class="item-btn-text"
                            @click="selectCCPeople"
                            size="mini"
                        >
                            {{ CCPeopleName || "请选择" }}
                            <i class="el-icon-plus"></i>
                        </el-button>
                    </el-form-item>
                </div>
                <div class="bottom-people-select">
                    <template v-for="(item, index) in jsonCustom.handleArr">
                        <div class="task-item-box" :key="'assignee' + index">
                            <div class="task-item-box-line">
                                <img src="~@/assets/task-receive.png" alt="" />
                                <span>任务接收</span>
                                <div class="line"></div>
                            </div>
                            <el-form-item
                                :label="item.name"
                                :prop="'assignee' + item.sort"
                                required
                                :rules="[
                                    {
                                        required: true,
                                        message: '请选择经办人',
                                        trigger: 'change',
                                    },
                                ]"
                            >
                                <el-button
                                    class="item-btn-text"
                                    @click="
                                        selectVillagePeople(
                                            'assignee' + item.sort
                                        )
                                    "
                                    size="mini"
                                >
                                    {{
                                        itemBtnText["assignee" + item.sort] ||
                                        "请选择"
                                    }}
                                    <i class="el-icon-plus"></i>
                                </el-button>
                            </el-form-item>
                        </div>
                    </template>
                    <template v-for="(item, index) in jsonCustom.approvalArr">
                        <div class="task-item-box" :key="'auditor' + index">
                            <div class="task-item-box-line">
                                <img src="~@/assets/task-review.png" alt="" />
                                <span>任务审核</span>
                                <div
                                    class="line"
                                    v-if="
                                        index !==
                                        jsonCustom.approvalArr.length - 1
                                    "
                                ></div>
                            </div>
                            <el-form-item
                                :label="item.name"
                                :prop="'auditor' + item.sort"
                                required
                                :rules="[
                                    {
                                        required: true,
                                        message: '请选择审批人',
                                        trigger: 'change',
                                    },
                                ]"
                            >
                                <span v-if="index === 0" class="username">{{
                                    user.name
                                }}</span>
                                <el-button
                                    v-else
                                    class="item-btn-text"
                                    @click="
                                        selectTownPeople('auditor' + item.sort)
                                    "
                                    size="mini"
                                >
                                    {{
                                        itemBtnText["auditor" + item.sort] ||
                                        "请选择"
                                    }}
                                    <i class="el-icon-plus"></i>
                                </el-button>
                            </el-form-item>
                        </div>
                    </template>
                </div>
            </el-form>
        </div>
        <div class="custom-tabs-box" :class="{ 'out-isSend': isSend }">
            <el-tabs v-model="activeName" class="theme-gray">
                <el-tab-pane
                    label="表单介绍"
                    name="formDescribe"
                    :disabled="!_isReadOnly"
                    v-if="!isSend"
                >
                    <richText
                        ref="richTextForm"
                        :departmentList="department.list"
                        v-model="model"
                        :userLevel="userLevel"
                        :richTextActiveName="richTextActiveName"
                        @activeChane="activeChane"
                    ></richText>
                </el-tab-pane>
                <el-tab-pane
                    label="表单设计"
                    name="formDesign"
                    :disabled="!_isReadOnly"
                >
                    <richText
                        v-if="isSend"
                        ref="richTextForm"
                        :departmentList="department.list"
                        v-model="model"
                        :isSend="isSend"
                        :userLevel="userLevel"
                        :richTextActiveName="richTextActiveName"
                        @activeChane="activeChane"
                    ></richText>
                    <template-form
                        ref="templateFormRef"
                        :model="model"
                        :formType="formType"
                        :userLevel="userLevel"
                        :departmentList="department.list"
                        @toShowPreview="showPreview"
                    >
                    </template-form>
                </el-tab-pane>
                <el-tab-pane
                    v-if="!_isDeclare"
                    label="关联流程"
                    name="contactProcess"
                    :disabled="!_isReadOnly"
                >
                    <select-flow
                        :key="key"
                        v-if="activeName === 'contactProcess'"
                        ref="SelectFlow"
                        :processId="$route.query.processId"
                        :canEdit="!$route.query.processId"
                    ></select-flow>
                </el-tab-pane>
            </el-tabs>
            <div class="btn-box" v-if="!isSend">
                <template
                    v-if="
                        _isDetail &&
                        _isTownPage &&
                        $route.query.formStatus.toString() === '1'
                    "
                >
                    <el-button type="primary" size="mini" @click="toSendTask"
                        >下发</el-button
                    >
                    <el-button type="primary" size="mini" @click="toFillIn"
                        >填报</el-button
                    >
                    <el-popover placement="bottom" width="260" trigger="click">
                        <div class="step-import">
                            <div class="step1">
                                <el-link
                                    type="primary"
                                    @click.stop="downTemplate(item)"
                                    >下载模板</el-link
                                >
                                <div>
                                    请先下载模板，根据模板填写后导入。<br />部分复杂表格格式暂不支持导入，请完成导入后进入详情页面手动添加。
                                </div>
                            </div>
                            <upLoad-normal
                                :accept="'.xlsx'"
                                :isSingle="true"
                                @httpRequest="httpRequest"
                            >
                                <el-link type="primary" @click="importRow(item)"
                                    >导入excel</el-link
                                >
                            </upLoad-normal>
                        </div>
                        <el-button
                            style="margin: 0 10px"
                            slot="reference"
                            type="primary"
                            size="mini"
                            >导入</el-button
                        >
                    </el-popover>
                </template>
                <el-button
                    v-if="activeName === 'formDesign' && !_isDetail"
                    type="primary"
                    size="mini"
                    @click="sure('DRAFT')"
                    >保存为草稿
                </el-button>
                <el-button
                    v-if="activeName === 'formDescribe' && !_isDetail"
                    size="mini"
                    type="primary"
                    @click="handleGoFormDesign"
                    >下一步
                </el-button>
                <el-button
                    v-if="activeName !== 'formDescribe' && !_isDetail"
                    type="primary"
                    size="mini"
                    @click="toPre"
                >
                    上一步
                </el-button>
                <!--                镇管理 -->
                <el-button
                    v-if="
                        !_isDetail &&
                        !_isTownPage &&
                        !_isDeclare &&
                        activeName === 'formDesign'
                    "
                    type="primary"
                    size="mini"
                    @click="sure('RELEASED')"
                    >下一步
                </el-button>
                <el-button
                    v-if="
                        !_isDetail &&
                        !_isTownPage &&
                        !_isDeclare &&
                        activeName === 'contactProcess'
                    "
                    type="primary"
                    size="mini"
                    @click="sure('RELEASED')"
                    >发布
                </el-button>
                <el-button
                    v-if="
                        !_isDetail &&
                        !_isTownPage &&
                        _isDeclare &&
                        activeName === 'formDesign'
                    "
                    type="primary"
                    size="mini"
                    @click="sure('RELEASED')"
                    >发布
                </el-button>
                <el-button
                    v-if="
                        !_isDetail &&
                        _isTownPage &&
                        activeName !== 'formDesign' &&
                        activeName !== 'formDescribe'
                    "
                    type="primary"
                    size="mini"
                    @click="sure('RELEASED')"
                    >保存
                </el-button>
                <!--                镇普通 -->
                <el-button
                    v-if="
                        !_isDetail &&
                        _isTownPage &&
                        activeName !== 'formDescribe'
                    "
                    type="primary"
                    size="mini"
                    @click="sure('RELEASED', 'SENDTASK')"
                    >{{
                        activeName !== "formDesign"
                            ? "保存并下发任务"
                            : "下一步"
                    }}
                </el-button>
                <template
                    v-if="
                        _isDetail &&
                        _isTownPage &&
                        $route.query.formStatus.toString() === '0'
                    "
                >
                    <el-button size="mini" type="primary" @click="edit"
                        >编辑</el-button
                    >
                    <el-button size="mini" type="primary" @click="remove"
                        >删除</el-button
                    >
                </template>
                <el-button size="mini" @click="goBackList">取消</el-button>
            </div>
        </div>
        <el-dialog
            class="custom-modal"
            :class="{ wechat: previewType === 'form' }"
            title="小程序端预览"
            :visible.sync="showPreviewDialog"
            append-to-body
            top="10vh"
            destroy-on-close
            :close-on-click-modal="false"
        >
            <div class="preview-title">
                <h4>{{ model.name }}</h4>
                <p v-if="childTab === 'text'">{{ model.desc }}</p>
            </div>
            <preview-list
                :formList="[].concat([], model.items)"
                :previewType="previewType"
                :isPreview="true"
            ></preview-list>
        </el-dialog>
        <el-dialog
            title="小程序端预览"
            :visible.sync="wechatDialogVisible"
            class="wechat-mask"
        >
            <div class="content">
                <h4>{{ model.name }}</h4>
                <p v-html="model.richText"></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleFillIn"
                    >我要填报</el-button
                >
            </span>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import FormMixin from "../form/form.mixin";
import TemplateForm from "../form/src/template-form/index.vue";
import FlowForm from "../form/src/flow-form/index.vue";
import SelectFlow from "@/views/module-manage/src/components/select-flow/index.vue";
import richText from "@/views/module-manage/src/components/richText/index.vue";
import { dialogSelect } from "@/views/process-manage/src/components/person-selection/index";
import { State } from "vuex-class";
import UpLoadNormal from "@/components/upload-normal/index.vue";
import { downLoadBase64File } from "@/utils";
// const mock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const setendDate = (rule: any, value: any, callback: any) => {
    if (new Date(value).getTime() <= new Date().getTime()) {
        callback(new Error("请勿选择过去时间"));
    } else {
        callback();
    }
};

// interface FormData {
//     name: string;
//     description?: string;
//     richText?: string;
//     department: string;
// }

@Component({
    // 镇级人员编辑表单
    name: "ModuleManageNormFormNotAlive",
    components: {
        TemplateForm,
        FlowForm,
        SelectFlow,
        UpLoadNormal,
        richText
    }
})
export default class ModuleManageNormForm extends Mixins(FormMixin) {
    @State((state) => state.user.userInfo) user: any;

    // FormData: FormData = {
    //     name: "",
    //     description: "",
    //     richText: ""
    // };

    get _isReadOnly() {
        return (
            this.$route.query.isDetail === "1" ||
            this.$route.query.isSend === "send"
        );
    }

    // tag = {
    //     id: "",
    //     list: []
    // };

    department: any = {
        id: "",
        list: []
    };

    sendTaskForm = {
        expectedNum: "",
        endDate: ""
    };

    // 选择人员按钮显示文字
    itemBtnText: any = {};
    // 人员选择的内容
    peopleItemList: any = {};
    // 抄送人ids
    selectCcList: any[] = [];
    // 抄送人items
    selectCcItemList: any[] = [];

    sendTaskFormRules = {
        endDate: [
            {
                required: true,
                message: "请选择结束时间",
                trigger: ["change", "blur"]
            },
            { validator: setendDate }
        ]
    };

    expireTimeOption = {
        disabledDate(date: any) {
            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
    };

    get CCPeopleName() {
        return this.selectCcItemList.map((item: any) => item.name).join(",");
    }

    activeChane(e: any) {
        this.childTab = e;
    }

    checkInput() {
        if (this.sendTaskForm.expectedNum.length === 1) {
            this.sendTaskForm.expectedNum =
                this.sendTaskForm.expectedNum.replace(/[^1-9]/g, "");
        } else {
            this.sendTaskForm.expectedNum =
                this.sendTaskForm.expectedNum.replace(/\D/g, "");
        }
    }

    // 我要填报
    handleFillIn() {
        this.wechatDialogVisible = false;
        this.showPreviewDialog = true;
    }

    created() {
        if (
            this.$route.query.processId &&
            this.$route.query.isSend === "send"
        ) {
            this.getFlowTable();
        }
        if (this.isSend) {
            this.activeName = "formDesign";
        }
    }

    // 获取表格数据
    getFlowTable() {
        this.$server["process/getTable"]({
            data: {
                pageSize: 99999,
                currentPage: 1
            }
        })
            .then((res: any) => {
                if (res.data.code === 200) {
                    const cur = res.data.data.records.filter(
                        (item: any) =>
                            item.definitionId === this.$route.query.processId
                    );
                    if (cur.length) {
                        this.jsonCustom = JSON.parse(cur[0].jsonCustomer);
                        this.getFormItem();
                        this.$store.dispatch("updateSelectedControl", {});
                    }
                } else {
                    this.$message.error(res.data.message);
                }
            })
            .catch();
    }

    toPre() {
        if (this.activeName === "formDesign") {
            this.activeName = "formDescribe";
        } else {
            this.activeName = "formDesign";
        }
    }

    async initSearchData() {
        const departmentResponse = await this.$server[
            "moduleManage/department"
        ]();
        if (this.responseHasError(departmentResponse)) {
            return;
        }
        this.department.list = this.buildTypeList(
            departmentResponse.data.data[0].children || []
        );
    }

    async sure(type: any, send?: any) {
        if (this.activeName === "contactProcess") {
            (this.$refs.SelectFlow as any).sure((val: any, flowList: any) => {
                if (flowList.length) {
                    this.jsonCustom = JSON.parse(flowList[0].jsonCustomer);
                }
                this.bindFlow(val, send);
            });
        } else {
            const templateFormRef: any = this.$refs.templateFormRef;
            const templateFormRefValidate: any = await templateFormRef.submit();
            if (templateFormRefValidate.result) {
                this.submit(type, send);
            } else {
                this.$message({
                    duration: 3000,
                    message:
                        templateFormRefValidate.msg || "请确保表单数据有效！",
                    type: "error"
                });
            }
        }
    }

    async sendTask() {
        if (!this.sendTaskForm.endDate) {
            return this.$message.error("请选择任务结束时间");
        } else {
            for (let i = 0; i < this.jsonCustom.handleArr.length; i++) {
                if (!this.sendTaskForm["assignee" + (i + 1)].length) {
                    return this.$message.error("请选择经办人");
                }
            }
            for (let i = 0; i < this.jsonCustom.approvalArr.length; i++) {
                if (!this.sendTaskForm["auditor" + (i + 1)].length) {
                    return this.$message.error("请选择审批人");
                }
            }
        }

        const data = this.sendTaskForm["assignee" + 1].map((item: any) => {
            return {
                ...this.sendTaskForm,
                processId:
                    this.$route.query.processId ||
                    (this.$refs.SelectFlow as any).processId,
                formId: this.$route.query.id,
                assignee1: [item],
                goal: this.sendTaskForm.expectedNum
            };
        });
        delete data.expectedNum;
        data.forEach((item: any) => {
            item.variable = {};
            Object.keys(item).forEach((key: any) => {
                if (Array.isArray(item[key])) {
                    item.variable[key] = item[key].join(",");
                    item[key] = undefined;
                }
            });
            delete item.expectedNum;
        });

        const response = await this.$server["moduleManage/form/startFlow"]({
            data: {
                formId: this.$route.query.id,
                endDate: this.sendTaskForm.endDate,
                goal: this.sendTaskForm.expectedNum,
                duplicateUsers: this.selectCcList,
                startVos: data
            }
        });
        if (response.data.code === 200) {
            this.$message({
                message: "下发成功",
                type: "success",
                duration: 1500
            });
            this.resetInterceptRouter(() => {
                this.$router.push({ path: "/module-manage/town-home" });
            });
        } else {
            this.$message.error(response.data.message || "接口请求错误!");
        }
    }

    handleGoFormDesign() {
        (this.$refs.richTextForm as any)
            .onSubmit()
            .then(() => {
                this.activeName = "formDesign";
            })
            .catch((e: any) => {
                return this.$message.error(e);
            });
    }

    // 获取任务节点数量
    getFormItem() {
        const obj: any = {};
        const handleArr: any[] = this.jsonCustom.handleArr;
        const approvalArr: any[] = this.jsonCustom.approvalArr;
        handleArr.forEach((item: any) => {
            obj["assignee" + item.sort] = [];
            this.$set(this.itemBtnText, "assignee" + item.sort, "");
        });
        approvalArr.forEach((item: any, index: number) => {
            if (index) {
                obj["auditor" + item.sort] = [];
            } else {
                obj["auditor" + item.sort] = [this.user.id];
            }
            this.$set(this.itemBtnText, "auditor" + item.sort, "");
        });
        Object.assign(this.sendTaskForm, obj);
    }

    // 选择村的人，任务接收
    selectVillagePeople(name: any) {
        if (name === "assignee1") {
            this.$selectPerson({
                title: "人员选择",
                authArea: this.authArea,
                user: this.user,
                selectedList: this.sendTaskForm[name],
                // disabledList 是否需要回显且不可删除的人员id数组 不可和selectedList是同一个变量
                // disabledList是初始就定下来了的 后续是不能去操作改变的
                disabledList: [],
                // selectedItemList: this.peopleItemList[name],
                tabs: [
                    {
                        label: "村成员",
                        name: "village",
                        type: "group"
                    },
                    {
                        label: "镇成员",
                        name: "town",
                        type: "group"
                    }
                ]
            })
                .then((val: any) => {
                    this.sendTaskForm[name] = val.list.map(
                        (item: any) => item.id
                    );
                    this.$set(
                        this.itemBtnText,
                        name,
                        val.list.map((item: any) => item.name).join(",")
                    );
                    this.peopleItemList[name] = val.list;
                })
                .catch(() => {
                    this.$message.info("取消选择");
                });
        } else {
            dialogSelect({
                selectedList: this.sendTaskForm[name],
                selectedItemList: this.peopleItemList[name],
                isSingle: name !== "assignee1",
                tabs: [
                    {
                        label: "村成员",
                        name: "village",
                        type: "group"
                    },
                    {
                        label: "镇成员",
                        name: "town",
                        type: "group"
                    }
                ],
                sure: (vm: any, model: any) => {
                    vm.close();
                    this.sendTaskForm[name] = model.selectedList;
                    this.$set(
                        this.itemBtnText,
                        name,
                        model.selectedItemList
                            .map((item: any) => item.name)
                            .join(",")
                    );
                    this.peopleItemList[name] = model.selectedItemList;
                },
                getOptions: (vm: any, model: any) => this.getOptions(vm, model)
            });
        }
    }

    // 选择镇的人，任务审批
    selectTownPeople(name: any) {
        dialogSelect({
            selectedList: this.sendTaskForm[name],
            selectedItemList: this.peopleItemList[name],
            isSingle: true,
            tabs: [
                {
                    label: "镇成员",
                    name: "town"
                }
            ],
            sure: (vm: any, model: any) => {
                vm.close();
                this.sendTaskForm[name] = model.selectedList;
                this.$set(
                    this.itemBtnText,
                    name,
                    model.selectedItemList
                        .map((item: any) => item.name)
                        .join(",")
                );
                this.peopleItemList[name] = model.selectedItemList;
            },
            getOptions: (vm: any, model: any) => this.getOptions(vm, model)
        });
    }

    // 选择抄送人
    selectCCPeople() {
        this.$selectPerson({
            title: "人员选择",
            authArea: this.authArea,
            user: this.user,
            selectedList: this.selectCcList,
            tips: "请勿与任务接收人重复",
            // selectedItemList: this.peopleItemList[name],
            tabs: [
                {
                    label: "村成员",
                    name: "village",
                    type: "group"
                },
                {
                    label: "镇成员",
                    name: "town",
                    type: "group"
                }
            ]
        })
            .then((val: any) => {
                this.selectCcList = val.list.map((item: any) => item.id);
                this.selectCcItemList = val.list;
                this.$set(
                    this.itemBtnText,
                    name,
                    val.list.map((item: any) => item.name).join(",")
                );
            })
            .catch(() => {
                this.$message.info("取消选择");
            });
        // dialogSelect({
        //     selectedList: [...this.selectCcList],
        //     selectedItemList: [...this.selectCcItemList],
        //     isSingle: false,
        //     tabs: [
        //         {
        //             label: "镇成员",
        //             name: "town",
        //             type: "group",
        //         },
        //         {
        //             label: "村成员",
        //             name: "village",
        //             type: "group",
        //         },
        //     ],
        //     tips: "请勿与任务接收人重复",
        //     sure: (vm: any, model: any) => {
        //         vm.close();
        //         console.log(model);
        //         this.selectCcList = model.selectedList;
        //         this.selectCcItemList = model.selectedItemList;
        //     },
        //     getOptions: (vm: any, model: any) => this.getOptions(vm, model),
        // });
    }

    // 获取选项
    async getOptions(vm: any, model: any) {
        if (model.name === "town") {
            const res = await this.$server["org/getMember"]({
                data: {
                    departmentId: "",
                    pageSize: 999,
                    currentPage: 1
                },
                loader: false
            });
            if (res.data.code === 200) {
                if (model.type === "group") {
                    const arrObj: any = {};
                    res.data.data.records
                        .filter((item: any) => item.id !== this.user.id)
                        .forEach((item: any) => {
                            if (arrObj[item.departmentId]) {
                                arrObj[item.departmentId].push({
                                    ...item,
                                    governmentName: item.departmentName
                                });
                            } else {
                                arrObj[item.departmentId] = [
                                    {
                                        ...item,
                                        governmentName: item.departmentName
                                    }
                                ];
                            }
                        });
                    vm.getOptions(Object.values(arrObj) || []);
                } else {
                    vm.getOptions(res.data.data.records || []);
                }
            } else {
                vm.getOptions([]);
            }
        } else if (model.name === "village") {
            const res = await this.$server["process/getGovernmentUser"]({
                data: {
                    governmentId: this.authArea.governmentId
                },
                loader: false
            });
            if (res.data.code === 200) {
                const list = res.data.data.filter(
                    (item: any) => item.id !== this.user.id
                );
                vm.getOptions(res.data.data ? list : []);
            } else {
                vm.getOptions([]);
            }
        }
    }

    // 填报数据
    toFillIn() {
        this.$router.push({
            name: "TownFillInFormFillIn",
            query: {
                id: this.$route.query.id
            }
        });
    }

    // 下载模板
    async downTemplate() {
        const res = await this.$server["task/download/templateForm"]({
            data: {
                formId: this.$route.query.id
            }
        });
        if (res.data && res.data.code === 200) {
            downLoadBase64File(
                this.model.name + "-" + "填报模板.xlsx",
                res.data.data
            );
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 自定义上传文件
    async httpRequest(fileList: any[]) {
        const form = new FormData();
        form.append("formId", this.currentFormId);
        for (let i = 0; i < fileList.length; i++) {
            form.append("file", fileList[i], fileList[i].name);
        }
        const res = await this.$server["moduleManage/fillForm/import"]({
            data: form
        });
        if (res.data.code === 200) {
            const msg = await this.$store.dispatch("importNotice", {
                formId: this.currentFormId
            });
            if (msg) {
                this.$message.success("导入成功，有其他特殊控件无法导入，请前往手动填写");
            } else {
                this.$message.success("导入成功");
                this.$router.push({ name: "TownFillInForm" });
            }
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 导入
    importRow() {
        this.currentFormId = this.$route.query.id || "";
    }

    // 去下发
    toSendTask() {
        this.getFlowTable();
        this.$router.push({
            name:
                (this._isOperationPage
                    ? "Operation"
                    : this._isTownPage
                        ? "Town"
                        : "TownAdmin") + "ModuleManageForm",
            query: {
                id: this.$route.query.id,
                processId: this.$route.query.processId,
                isSend: "send"
            }
        });
    }

    // 编辑
    edit() {
        this.$router.push({
            name:
                (this._isOperationPage
                    ? "Operation"
                    : this._isTownPage
                        ? "Town"
                        : "TownAdmin") + "ModuleManageForm",
            query: {
                id: this.$route.query.id,
                processId: this.$route.query.processId
            }
        });
    }

    remove() {
        this.$confirm("是否确定删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const response = await this.$server["moduleManage/form/delete"](
                    {
                        params: {
                            id: this.$route.query.id
                        }
                    }
                );
                if (this.responseHasError(response)) {
                    return;
                }
                if (response.data.code !== 200) {
                    throw response.data;
                }
                this.$message({
                    message: "删除成功",
                    type: "success",
                    duration: 1500
                });
                this.goBack();
            })
            .catch();
    }

    goBackList() {
        this.$router.push({
            name: this.$route.query.declareTypeId
                ? "DeclareConfig"
                : this._isOperationPage
                    ? "OperationModuleManageList"
                    : this._isTownPage
                        ? "TownModuleManageHome"
                        : "TownAdminModuleManageList"
        });
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        margin-top: 10px;
    }
}

.custom-tabs-box {
    position: relative;
    height: 100%;

    .btn-box {
        position: absolute;
        right: 20px;
        top: 10px;
    }

    .el-tabs {
        height: 100%;
    }

    ::v-deep {
        .el-tabs__header {
            background: #fff;
            margin-bottom: 10px;
            padding: 0 20px 0 30px;
        }

        .el-tabs__nav {
            .el-tabs__item {
                height: 48px;
                line-height: 48px;

                &.is-disabled {
                    color: #303133 !important;
                }

                &.is-active {
                    color: #de2728 !important;
                }
            }
        }

        .el-tabs__content {
            height: calc(100% - 58px);
            //height: 100%;
            overflow: auto;

            .el-tab-pane {
                height: 100%;
            }
        }

        .el-tabs__nav-wrap::after {
            background: transparent;
        }
    }

    &.out-isSend {
        ::v-deep {
            .custom-form {
                padding-top: 0 !important;
            }
        }
    }
}

.send-task-content {
    background: #fff;
    margin-bottom: 10px;
    padding: 18px 20px 10px 26px;

    .send-task-title {
        margin-bottom: 13px;
        @include flexLayout(flex, justify, center);

        .title {
            font-size: 16px;
            font-family: "PingFang SC Medium";
            line-height: 22px;
            color: #37383a;
        }
    }

    ::v-deep {
        .el-form-item__label {
            font-size: 14px;
            font-family: "PingFang SC Medium";
            color: #37383a;
        }
    }

    .username {
        font-size: 14px;
        font-family: "PingFang SC Medium";
        line-height: 20px;
        color: #37383a;
    }

    .item-btn-text {
        max-width: 200px;
        min-width: 100px;
        padding-right: 25px;
        font-size: 14px;
        font-family: "PingFang SC Medium";
        color: #37383a;
        @include textEllipsis();
        position: relative;

        .el-icon-plus {
            position: absolute;
            font-size: 12px;
            color: #de2728;
            right: 10px;
            top: 8px;
        }

        &:hover {
            .el-icon-plus {
                color: #fff;
            }

            color: #fff;
        }
    }

    .task-item-box {
        display: inline-block;

        .task-item-box-line {
            width: 100%;
            @include flexLayout(flex, normal, center);
            margin-bottom: 18px;

            img {
                display: inline-block;
                width: 18px;
            }

            span {
                font-size: 16px;
                font-family: "PingFang SC";
                margin: 0 10px 0 5px;
                line-height: 22px;
                color: #de2728;
            }

            .line {
                width: calc(100% - 104px);
                height: 1px;
                background: #de2728;
            }
        }
    }

    .send-task-form {
        .bottom-people-select {
            width: 100%;
            @include flexLayout(flex, normal, normal);
            overflow-x: auto;
        }

        ::v-deep {
            .el-form-item {
                margin-right: 60px;
                margin-bottom: 18px;
                width: 328px;

                .expectedNum-input {
                    width: 204px;
                }

                &:last-child {
                    margin-right: 0;
                }

                .el-form-item__content {
                    width: 220px;

                    .el-date-editor {
                        max-width: 100%;
                    }
                }
            }

            .task-item-box {
                .el-form-item {
                    margin-right: 60px;
                }

                &:last-child {
                    .el-form-item {
                        margin-right: 0;
                    }
                }
            }
        }

        .top-set {
            .el-form-item:last-child {
                width: calc(100% - 388px - 388px);
                max-width: 328px;

                .el-form-item__content {
                    width: unset;
                }
            }
        }
    }
}

.custom-modal {
    ::v-deep {
        .el-dialog {
            min-width: 900px;

            .el-dialog__header {
                border-bottom: 1px solid #9da1a4;
                padding: 20px 0 4px;
                margin: 0 20px;
            }

            .el-dialog__title {
                font-size: 20px;
                font-family: "PingFang SC";
                font-weight: bold;
                line-height: 28px;
                color: #37383a;
            }

            .el-dialog__body {
                padding-top: 10px;
            }

            .preview-title {
                display: flex;
                flex-direction: column;

                h4 {
                    font-size: 16px;
                }

                p {
                    margin: 0;
                    font-size: 14px;
                    font-family: "PingFang SC Medium";
                    line-height: 22px;
                    color: #37383a;
                }

                .change-btn {
                    font-size: 16px;
                    font-family: "PingFang SC Medium";
                    font-weight: bold;
                    color: #2c82c9;
                    line-height: 22px;
                }
            }
        }
    }

    &.wechat {
        ::v-deep {
            .el-dialog {
                width: 400px;
                min-width: unset;
            }
        }
    }
}

.wechat-mask {
    ::v-deep {
        .el-dialog {
            width: 400px;
            min-width: unset;

            .el-dialog__header {
                border-bottom: 1px solid #9da1a4;
                padding: 20px 0 4px;
                margin: 0 20px;
            }

            .el-dialog__title {
                font-size: 20px;
                font-family: "PingFangSC";
                font-weight: bold;
                line-height: 28px;
                color: #37383a;
            }

            .el-dialog__body {
                height: 540px;
                overflow: scroll;
            }

            .el-dialog__footer {
                padding: 0;

                .dialog-footer {
                    width: 100%;
                    display: flex;

                    button {
                        width: 100%;
                        border-radius: 0;
                    }
                }
            }
        }
    }
}
</style>
